<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ msg1 }}</h1>
    <!-- <div id="qrcode" ref="qrcode"></div> -->
    <div id="qrCode" ref="qrCodeDiv"></div>
    <!-- <div>{{ qrcodev }}</div> -->
    <div>{{ counter4 }}</div>
    <div>{{ textA }}</div>
    <div>{{ textA1 }}</div>
    <div>{{ textPlus }}--{{ textPlus1 }}</div>
    <div>{{ textA2 }}--{{ textA3 }}--{{ textA4 }}</div>
    <div>{{ textC }}</div>
  </div>
</template>

<script>
// import QRCode from 'qrcodejs2' // 引入qrcode
import {
  mapState, // 引入state
  mapMutations,
  mapGetters,
  mapActions
} from 'vuex'
export default {
  name: 'apple',
  data () {
    return {
      msg: 'Welcome to Your Vue.js banana',
      msg1: '欢迎Dylan',
      qrcodev: '',
      code: '并不是所有单身都代表是可撩状态，有些人对恋爱已经没有指望，他们只想安安静静的发财。脱单不如脱脂，脱脂不如脱贫，何以解忧，唯有暴富。'
    }
  },
  mounted () {
    // console.log(this.$route.query.id)
    // console.log(this.$route)
    // console.log(this.$qrCode)
    // let _this = this
    this.$nextTick(() => {
      // this.qrcodev = this.qrcode('哈赛嗨')
      this.qrcode('哈赛嗨')
    })
    // dispatch是触发actions的
    this.$store.dispatch('updateCountAsync', {
      num: 5,
      time: 3000
    })
    // 调用模块a下面的mutations的updateText
    this['a/updateText']('123')
    this['a/add']() // 改变的是textA2（3-2）
    this['a/add1']() // 改变的是textA2（0-56789）
    this.textAction() // 如果在b模块namespaced: true加上，则在这里要this['b/textAction']()
  },
  computed: {
    // 不同的写法，相同的结果
    ...mapState({
      counter4: 'count4',
      // 通过对象的映射关系来书写
      textA: state => state.a.text,
      textA1: state => state.a.text1,
      textA2: state => state.a.text2,
      textA3: state => state.count5,
      textA4: state => state.a.text3,
      textC: state => state.cc.text // 动态加载一个模块--main.js文件
    }),
    // 通过名字来调用属性---推荐上面“通过映射关系来书写”
    // textA () {
    //   return this.$store.state.a.text // 通过不同的模块去调用state的一个方法，通过a，b命名空间来调用专属的一个state，这样通过不同的模块就可以清晰的知道调用的是哪个模块的数据
    // }
    ...mapGetters({
      'fullName': 'fullName',
      textPlus: 'a/textPlus',
      textPlus1: 'a/textPlus1'
    })
  },
  methods: {
    ...mapMutations(['a/updateText']), // 在上面调用this['a/updateText']('123')
    ...mapActions(['a/add', 'a/add1', 'textAction']), // 在上面调用this['a/add']()--在b模块里面并没有声明namespaced: true,所以直接textAction
    // 如果在b模块namespaced: true加上，则在这里要...mapActions(['b/textAction'])
    qrcode (url) {
      // let qrcode = new QRCode('qrcode', {
      // let qrcode = new this.$qrCode(this.$refs.qrCodeDiv, {
      let qrcode = new this.$qrCode(this.$refs.qrCodeDiv, {
        // this.$refs.qrcode0[0] 有时候需要这样写，看具体的ref情况
        width: 132,
        height: 132,
        text: url, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff',
        name: 'Dylan',
        list: [{a: 1, b: 2}, {a: 1, b: 2}]
        // correctLevel: this.$qrCode.CorrectLevel.L // 容错率，L/M/H
        // render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f', // 背景色
        // foreground: '#ff0' // 前景色
        // 为了防止重复生成二维码，使用置空进行控制：document.getElementById("qrcode").innerHTML = ""
        // qrcode.clear(); // 清除代码
        // qrcode.makeCode("https://m.qtshe.com"); // 生成另外一个二维码
      })
      console.log(qrcode)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#qrcode {
  display: inline-block;
  /* img {
    width: 132px;
    height: 132px;
    background-color: #fff;
    padding: 6px;
  } */
}
img {
  width: 132px;
  height: 132px;
  background-color: #fff; /* 设置白色背景色 */
  padding: 6px; /* 利用padding的特性，挤出白边 */
}
</style>
